@extends("admin.layout.main")
@section("content")
    <div id="app" >
        {{--按钮栏--}}
        <Row type="flex"  align="middle">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <i-col span="35" style="margin: 20px ;">
                <span>
                    &nbsp&nbsp头条号:
                    <i-select v-model="account_name" placeholder="请选择头条号" style="width:180px" filterable>
                        <i-option value="">全部账号</i-option>
                        <i-option v-for="account of accounts" :value="account.account_name">@{{account.account_name}}</i-option>
                    </i-select>
                </span>

                <span>
                    &nbsp&nbsp&nbsp开始时间:
                     <date-picker type="datetime"
                                  placeholder="选择开始日期" style="width: 200px"
                                  v-model="start_time"
                                  >
                    </date-picker>
                </span>
                <span>
                    &nbsp&nbsp&nbsp结束时间:
                     <date-picker type="datetime"
                                  placeholder="选择结束时间" style="width: 200px"
                                  v-model="end_time"
                                  >
                    </date-picker>
                </span>
                <span>
                    <i-button type="warning" @click="getData(1)">查询</i-button>
                </span>

            </i-col>
        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table  :data="tableCount" :columns="tableCountColumns" stripe
                          style="width: 100% !important;">
                </i-table>
            </i-col>
        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table  :data="tableData" :columns="tableColumns" stripe
                         style="width: 100% !important;"  @on-sort-change="changeSort" >
                </i-table>
            </i-col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getData">

                </Page>
            </i-col>
        </Row>

    </div>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    start_time: "",
                    end_time: "",
                    account_name: "",
                    key:"read_count",
                    order:'desc',
                    accounts:[],
                    tableData:[],
                    tableCount:[],
                    page:{
                       total:0,
                       current:0,
                       pageSize:0
                    },
                    spinShow:false,
                    tableCountColumns:[
                        {
                            title: '账号',
                            key:'account_name',
                        },
                        {
                            title: '总阅读',
                            key:'total_read_count',
                        },
                        {
                            title: '总点赞',
                            key:'total_digg_count',
                        },
                        {
                            title: '总评论',
                            key:'total_comment_count',
                        },
                    ],
                    tableColumns: [

                        {
                            title: '账号',
                            key:'account_name',
                        },
                        {
                            title: '图片',
                            render(h,param){
                                let row = param.row;
                                let img = row.img;
                                return h('img', {
                                    attrs: {
                                        src: img,
                                    },
                                    style: {
                                        width:'130px',
                                        margin: '5px'
                                    }
                                });
                            }
                        },

                        {
                            title: '内容',
                            render:(h,params) => {
                                let content = params.row.content;
                                let thread_id = params.row.thread_id;
                                content = content.substring(0,15) + '...';
                                origin_url = 'https://www.toutiao.com/a'+thread_id
                                return h('div', [
                                    h('a', {
                                        domProps:{
                                            href: origin_url,
                                            target:'_blank'
                                        },

                                    }, content),
                                ]);
                            }

                        },
                        {
                            title: '阅读',
                            key:'read_count',
                            width:80,
                            sortable: 'custom',

                        },
                        {
                            title: '点赞',
                            key:'digg_count',
                            width:80
                        },
                        {
                            title: '评论',
                            key:'comment_count',
                            width:80
                        },
                        {
                            title: '转发',
                            key:'forward_count',
                            width:80
                        },
                        {
                            title: '时间',
                            key:'create_time',
                            sortable: 'custom'
                        },

                    ],
                };
            },
            mounted(){
                this.token = window.localStorage.getItem('current_user');
                this.start_time = this.getValidDateObj(7)
                this.end_time = this.getValidDateObj(0)
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                accountList() {
                    that = this;
                    url = 'http://bb.7sjz.com/api/toutiao/get_account?user_id=1';
                    axios.get(url)
                        .then(function (response) {
                            that.accounts = response.data.data;
                        })
                        .catch(function (error) {
                            that.$Message.error('服务器异常');
                        });
                },
                getData (page = 1) {
                    let that = this;
                    this.spinShow = true;
                    start_time = '';
                    if(this.start_time){
                        start_time = this.tranDateObjToStr(this.start_time);
                    }
                    end_time = '';
                    if(this.end_time){
                        end_time = this.tranDateObjToStr(this.end_time);
                    }
                    key = this.key;
                    order = this.order;
                    axios.get("/admin/media/wtt/data", {
                        params: {
                            token:vm.token,
                            start_time: start_time,
                            end_time: end_time,
                            account_name: that.account_name,
                            key:key,
                            order:order,
                            page:page
                        }
                    })
                        .then(function (response) {
                            result = response.data.result;
                            vm.tableData = result.list.data;
                            vm.tableCount = result.data;
                            vm.page.total = result.list.total;
                            vm.page.pageSize = result.list.per_page;
                            vm.page.current = result.list.current_page;
                            vm.spinShow = false;
                        })
                        .catch(function (error) {
                            this.$Message.error('服务器异常');
                        });
                },
                getValidDateObj(dayCount = 0) {
                    curDate = new Date();
                    preDate = new Date(curDate.getTime() - dayCount * 24 * 60 * 60 * 1000);
                    return preDate;
                },
                tranDateObjToStr(preDate) {
                    let year = preDate.getFullYear();
                    let month = preDate.getMonth()+1;
                    if(month < 10){
                        month = '0'+ month;
                    }
                    let day = preDate.getDate();
                    if(day < 10){
                        day = '0'+ day;
                    }
                    h = preDate.getHours();// 小时
                    m = preDate.getMinutes(); // 分
                    s = preDate.getSeconds(); // 秒

                    if(h < 10){
                        h = '0'+h;
                    }
                    if(m < 10){
                        m = '0'+m;
                    }
                    if(s < 10){
                        s = '0'+s;
                    }
                    let time = year + '-' + month + '-' + day +' '+h+':'+m+':'+s;

                    return time;
                },
                changeSort(param){
                    this.key = param.key
                    this.order = param.order
                    this.getData(1)
                }
            }


        });
        vm.accountList()
        vm.getData()
    </script>
@endsection